<template>
  <div>
    <!-- <AddGood v-show="isShow" /> -->
    <div class="sr-container" style="margin:20px">
      <div class="fliter-container" style="margin-top:15px">
        <p style="display:inline-block;margin-top:2%">商品类型：</p>
      <el-select size="small" placeholder="全部" clearable class="filter-item" style="width:130px" v-model="search.goodType">
        <el-option v-for="item in mainGoodType" :key="item.catId" :label="item.catName" :value="item.catId" />
      </el-select>
        <span style="margin-left:2%">商品品牌：</span>
        <el-input
          v-model="search.brand"
          placeholder="请输入商品品牌"
          size="small"
          class="fliter-item"
          style="width:200px"
          @keyup.enter.native="handleFilter"
        ></el-input>
        <span style="margin-left:2%">商品名称：</span>
        <el-input
          v-model="search.goodName"
          placeholder="请输入商品名称"
          size="small"
          class="fliter-item"
          style="width:200px"
          @keyup.enter.native="handleFilter"
        ></el-input>
        <el-button
          size="small"
          style="margin-left:3%;"
          class="filter-item"
          type="success"
          icon="el-icon-search"
          @click="handleFilter"
        >查询</el-button>
      </div>
      <!-- 仓库商品列表 -->
      <el-table :data="dataList" style="width: 100%;margin-top:15px" tooltip-effect="dark" border>
        <el-table-column type="index" min-width="50" label="序号" align="center"></el-table-column>
        <el-table-column label="商品编码" align="center" prop="goodCode">
          <template slot-scope="{row}">
            <span>{{row.proId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品" min-width="250px" align="center">
          <template slot-scope="scope">
            <div style="dispaly:table;margin:0 auto;height:100px;align-content: center">
              <el-image
                style="width: 100px; height: 100px;margin-right:10px;float:left"
                :src="scope.row.imageUrl"
                fit
                lazy
              ></el-image>
              <div>
                <p align="left" style="margin-bottom:20px;">商品名称：{{ scope.row.infoName }}</p>
                <p align="left" style="margin-bottom:0px;">商品型号：{{ scope.row.proType }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品类型" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{row.proCatName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品品牌" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{row.goodsBrand}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="市场价" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{row.proMarketPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="销售价" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{row.proSellPrice}}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="商品状态" width="150px" align="center">
          <template slot-scope="{row}">
            <span>{{row.status=='1'?'上架': (row.status=='2'?'下架':'删除')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" width="150px" align="center">
          <template slot-scope="{row}">
            <span>{{row.sumAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="{ row }">
            <el-button type="primary" size="small" plain @click="handlerSearch(row)">查看仓库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="search.pageNum"
        :limit.sync="search.pageSize"
        @pagination="getList"
      />
      <!-- 仓库分布详情 -->
      <el-dialog
        title="仓库分布详情"
        :visible.sync="isReportVisible"
        width="80%"
        append-to-body
        :close-on-click-modal="false"
        @close="loadPage"
      >
        <div>
          <span style="margin-left:5px;">仓库:</span>
           <el-select size="small" placeholder="全部" clearable class="filter-item" style="width:130px" v-model="record.warehouseId">
            <el-option v-for="item in mainWarehouseList" :key="item.warehouseId" :label="item.county" :value="item.warehouseId" />
          </el-select>
          <el-button
            size="small"
            style="margin-left:3%;"
            class="filter-item"
            type="success"
            icon="el-icon-search"
            @click="getReportList"
          >查询</el-button>
          <el-table
            :data="recordData"
            style="width: 100%;margin-top:15px;padding-bottom:2%"
            tooltip-effect="dark"
            border
          >
            <el-table-column type="index" min-width="50" label="序号" align="center"></el-table-column>
            <el-table-column prop="name" label="省" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.province }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="市" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.city }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="县" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.county }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="库存" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.amount }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="reportTotal > 0"
            :total="reportTotal"
            :page.sync="record.pageNum"
            :limit.sync="record.pageSize"
            @pagination="handlePage"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getMainStorage,getcangkuList,getSeasoning,getProcatList,getRecordList } from '@/api/mainStorage'
import Pagination from "@/components/Pagination";
const calendarTypeOptions = [
  { key: '737717c9-eb23-11e9-af14-7cd30ac0ab94', display_name: '热水器' },
  { key: '24c306ee-b1a9-11e9-9cf4-105bad763570', display_name: '空调' },
]
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
export default {
  inject:["reload"],
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  components: { Pagination },
  data() {
    return {
      total:0,
      //仓库商品的total
      // total: null,
      //仓储记录的total
      reportTotal: 0,
      //添加商品-库存商品列表
      calendarTypeOptions,
      //仓储记录
      isReportVisible: false,
      recordData:null,
      //添加商品
      isShowAddVisible: false,
      //调货
      isTransferVisible: false,
      //调货提交数据
      //仓储记录
      record:{
        pageNum: 1,
        pageSize: 10,
        warehouseId:''
      },
      //查询内容
      search: {
        pageNum: 1,
        pageSize: 10,
        //仓库选择
        mainWarehouse: "",
        //商品类型
        goodType: "",
        //商品品牌
        brand: "",
        //商品名称
        goodName: "",
        //商品编码
        goodCode: ""
      },
      //仓储记录时间查询
      dialogForm: {
        transferTime: []
      },
      //仓库里商品列表
      dataList: [
      ],
      data1List:[],
      //总仓列表
      mainWarehouseList: [
      ],
      mainGoodType:[],
      proId:'',
      rowObject:{}
    };
  },
  created() {
    this.getList()
    // this.setTable()
    this.getProcat()
  },
  methods: {
    getProcat(){
      getProcatList().then(res=>{
        this.mainGoodType=res.data
      })
    },
    loadPage(){
      this.reload()
    },
    //仓库商品列表
    getcangku(){
      getcangkuList(this.proId).then(res=>{
        this.mainWarehouseList=res.data
      })
    },
    getList() {
      this.listLoading = true
      var params = {
        // pageConvert: true,
        pageNum: this.search.pageNum-1,
        pageSize: this.search.pageSize,
        areaCode: this.search.mainWarehouse,
        goodsName: this.search.goodName,
        goodsBrand: this.search.brand,
        classification: this.search.goodType
      }
      getMainStorage(params).then(response => {
        this.dataList = response.data.content
        this.total = response.data.totalElements
        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
    handleFilter() {
      this.search.page = 1
      this.getList()
    },
    getReportList() {
      this.record.pageNum = 1
      this.handlerSearch(this.rowObject)
    },
    handlePage(){
      this.handlerSearch(this.rowObject)
    },
    //搜索
    //仓储记录dialog
    handlerSearch(row) {
      this.proId=row.proId
      this.rowObject=row
      console.log(this.proId)
      this.getcangku()
      this.isReportVisible = true;
      var params={
        pageNum:this.record.pageNum-1,
        pageSize:this.record.pageSize,
        proId:this.proId,
        warehouseId:this.record.warehouseId
      }
      getRecordList(params).then(res=>{
        this.recordData=res.data.content
        this.reportTotal=res.data.totalElements
      })
    }
  }
};
</script>